{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 用户组管理{% endblock %}
{% block content %}
    <style>
    .dept_tree{
        box-sizing: unset !important;
        display: block;
    }
    div span i{
        box-sizing: unset;
    }
    </style>
    <!-- 内容标题栏 -->
    <div class="content-header" style="width: 97%">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">部门管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-12" >
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">用户管理</li>
                <li class="breadcrumb-item active"><a href="">组织架构</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="card card-gray h-100">
                    <div class="card-header">
                        <h3 class="card-title">组织架构</h3>
                    </div>
                    <div class="card-body ">
                        {% if not groups %}
                        <div class="row">
                            <div style="margin: 0 2% 2% 4%;width: 60%">
                                <input type="text" id="group" class="form-control">
                            </div>
                            <div style="margin: 0 0 2% 0;width: 34%;">
                                <button id="add_groups" class="btn btn-primary">设置企业名称</button>
                            </div>
                        </div>
                        {% endif %}
                        <div class="dept_tree">
                            <ul id="tree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-8" id="dept_contents">
                <div class="card card-primary h-100">
                    <div class="card-header">
                        <h3 class="card-title">部门信息</h3>
                    </div>
                    <div class="card-body">
                        <form id="put" enctype="multipart/form-data" action="" method="post">
                            {% csrf_token %}
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-right text-primary">部门名称：</label>
                            <div class="col-10">
                                <input type="text" value="" readonly id="select_name" class="form-control form-control-border">
                                <input type="text" value="" id="select_did" name="select_did" class="form-control" hidden>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-right text-primary">部门主管：</label>
                            <div class="col-10">
                                <input type="text" value="" id="select_leader" name="select_leader" class="form-control form-control-border">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-right text-primary">部门人数【所有】：</label>
                            <div class="col-10">
                                <input type="text" value="" id="select_people" class="form-control form-control-border" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-form-label col-2 text-right text-primary">下属部门：</label>
                            <div class="col-10">
                                <textarea  rows="7" id="select_sub" class="form-control form-control-border" readonly></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-2"></div>
                            <div class="col-10">
                                <input type="submit" value="设置或修改部门主管" id="submit" class="btn-primary btn">
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% block custom_js %}
<script type="text/javascript">
    //post提交的csrf认证
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    //ztree
    $(function () {
        var setting={
            check: {
                enable: false,   //checkbox
                chkStyle: "checkbox",
            },
            edit:{
              enable: true,
              removeTitle: "删除",
              renameTitle: "编辑",
            },
            view: {
                addHoverDom: addHoverDom,  //自定义ztree控件，增加节点
                removeHoverDom: removeHoverDom,
            },
            callback:{
                onRemove: onRemove,
                onRename: onRename,
                onClick: onClick,   // 单击选中事件
            },
        };
        //节点数据来源
        var zTreeNodes= getData();
        $(document).ready(function () {
           $.fn.zTree.init($("#tree"),setting,zTreeNodes);
        })
        // 单击选中，在右侧显示用户部门名称，部门主管
        function onClick(event, treeId, treeNode) {
            $.ajax({
                type: "post",
                url: "{% url 'login:getGroupDetail' %}",
                async: false,
                data:{
                    'id': treeNode.id,
                    'name': treeNode.name,
                },
                success: function (data) {
                    if(data.status === 1){
                        //操作成功,更新到右侧信息框
                        $("#select_name").empty();
                        $("#select_name").val(data.dname);
                        $("#select_leader").empty();
                        $("#select_leader").val(data.leader);
                        $("#select_people").empty();
                        $("#select_people").val(data.people_count);
                        $("#select_sub").empty();
                        $("#select_sub").val(data.sub_dept);
                        $("#select_did").empty();
                        $("#select_did").val(data.did);
                    }else {
                        //操作失败
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            info = data.info
                            layer.alert(info,{
                                icon: 0,
                                skin: 'layer-ext-moon',
                            })
                        })
                    }
                }
            })
        }
        //自定义添加按钮
       function addHoverDom(treeId,treeNode){
            var sObj = $("#" + treeNode.tId + "_span");
            if(treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_"+treeNode.tId+"' title='添加下属部门' onfocus='this.blur();'><span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if(btn)btn.bind("click",function () {
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = "确认为"+treeNode.name+"添加下属部门吗?"
                    layer.alert(info,{
                        icon: 6,
                        btn: ['确定','取消'],
                        skin: 'layer-ext-moon',
                        yes: function () {
                            var treeInfo = treeNode.id;
                            $.ajax({
                                type: "post",
                                url: "{% url 'login:getGroup' %}",
                                async: false,
                                data:{
                                    'id': treeInfo,
                                    'type': 'add',
                                    'name': treeNode.name,
                                },
                                success: function (data) {
                                    if(data.status === 1){
                                        //操作成功
                                        layui.use('layer',function () {
                                        var layer=layui.layer;
                                        info = data.info
                                        layer.alert(info,{
                                            icon: 6,
                                            skin: 'layer-ext-moon',
                                            yes: function () {
                                                window.location.reload();
                                            },
                                        })
                                        })
                                    }else {
                                        //操作失败
                                        layui.use('layer',function () {
                                            var layer=layui.layer;
                                            info = data.info
                                            layer.alert(info,{
                                                icon: 0,
                                                skin: 'layer-ext-moon',
                                            })
                                        })
                                    }
                                }
                            })
                        },
                        btn2: function() {
                            layui.use('layer',function () {
                                var layer=layui.layer;
                                info = '您取消了操作！'
                                layer.alert(info,{
                                    icon: 0,
                                    skin: 'layer-ext-moon',
                                    yes: function () {
                                        window.location.reload();
                                    },
                                })
                            })
                        }
                    })
                });
            })
           }
        //自定义添加按钮-绑定鼠标离开事件
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };
       //删除操作
        function onRemove(event, treeId, treeNode) {
            $.ajax({
                type: "post",
                url: "{% url 'login:getGroup' %}",
                async: false,
                data:{
                    'id': treeNode.id,
                    'type': 'del',
                },
                success: function (data) {
                    if(data.status === 1){
                        //操作成功
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            info = data.info
                            layer.alert(info,{
                                icon: 6,
                                skin: 'layer-ext-moon',
                                yes: function () {
                                    window.location.reload();
                            },
                            })
                        })
                    }else {
                        //操作失败
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            info = data.info
                            layer.alert(info,{
                                icon: 0,
                                skin: 'layer-ext-moon',
                                yes: function () {
                                    window.location.reload();
                            },
                            })
                        })
                    }
                }
            })
        }
        // 编辑操作
        function onRename(event, treeId, treeNode) {
            $.ajax({
                type: "post",
                url: "{% url 'login:getGroup' %}",
                async: false,
                data:{
                    'id': treeNode.id,
                    'type': 'update',
                    'name': treeNode.name,
                },
                success: function (data) {
                    if(data.status === 1){
                        //操作成功
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            info = data.info
                            layer.alert(info,{
                                icon: 6,
                                skin: 'layer-ext-moon',
                                yes: function () {
                                    window.location.reload();
                            },
                            })
                        })
                    }else {
                        //操作失败
                        layui.use('layer',function () {
                            var layer=layui.layer;
                            info = data.info
                            layer.alert(info,{
                                icon: 0,
                                skin: 'layer-ext-moon',
                            })
                        })
                    }
                }
            })
        }
    });
    //获取数据
    function getData(){
        $.ajax({
            type: "get",
            url: "{% url 'login:getGroup' %}",
            async: false,
            success: function (result) {
                data = result;
            }
        });
        console.log(data)
        return data
    }
    //ajax添加公司名称，方便后面添加组织架构
$("#add_groups").click(function () {
    $.ajax({
        type: "post",
        url: "{% url 'login:getGroup' %}",
        async: false,
        data:{
            'group': $("#group").val(),
        },
        success: function (data) {
            if(data.status === 1){
                //操作成功
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 6,
                        skin: 'layer-ext-moon',
                    })
                })
                window.location.reload()
            }else {
                //操作失败
                layui.use('layer',function () {
                    var layer=layui.layer;
                    info = data.info
                    layer.alert(info,{
                        icon: 0,
                        skin: 'layer-ext-moon',
                    })
                })
            }
        }
    });
})
</script>
<script>
 // 提交，FORM  ID
$("#put").submit(function () {
    var options = {
        success: showRespone,  //ajaxForm提交成功后，执行函数
        resetForm: false,      //执行完毕后是否重设表单
        datetype: 'json',      //数据类型
    }
    $("#put").ajaxSubmit(options);
    return false;
})

function showRespone(data) {
    if(data.status === 1){
        //操作成功
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 6,
                btn: '确定',
                skin: 'layer-ext-moon',
                yes: function () {
                    layer.close(layer.index);  // 关闭当前最顶级弹窗
                    //window.location.href=""
                },
            })
        })
    }else {
        //操作失败
        layui.use('layer',function () {
            var layer=layui.layer;
            info = data.info
            layer.alert(info,{
                icon: 5,
                skin: 'layer-ext-moon',
            })
        })
    }
}
</script>
{% endblock %}
{% endblock %}